import React, { Component } from 'react'
import { connect } from 'dva';

import { Table, Alert } from 'antd';

import Form from './BuildSearchForm';

import { UmiComponentProps, BaseComponentProps } from '@/common/type';

export interface P {
  data?: {
    list: Array<any>;
    total: number;
  };
  fireRoomId: string;
  isSelect?: boolean;
  onSelectRow?: (row: Array<any>) => void;
  onChange?: Function;
  selected?: Array<string>;
  wrappedComponentRef?: Function;
}

interface State {
  current: number;
  selectedRowKeys: Array<any>;
  rowData: any;
}

type Props = P & UmiComponentProps & BaseComponentProps;

@connect(({ fireroom, loading }) => ({
  data: fireroom.buildList || {},
  cond: fireroom.buildCond || {},
  loading: loading.effects['fireroom/queryBuildPage'],
}))
class Build extends Component<Props, State> {

  readonly state = {
    current: 1,
    selectedRowKeys: this.props.selected || [],
    rowData: null,
  }

  private queryData = (params: { pageNum: number, name?: string }) => {
    const { dispatch, fireRoomId, isSelect } = this.props;
    dispatch({
      type: 'fireroom/queryBuildPage',
      payload: {
        ...params,
        fireRoomId: isSelect ? null : fireRoomId
      }
    });
  }

  private onSelectChange = (selectedRowKeys, selectedRows) => {

    const { onSelectRow } = this.props;
    if (onSelectRow) {
      onSelectRow(selectedRowKeys.map(v => {
        const [id, name, fireRoomId] = v.split('%%')
        return { id, name, fireRoomId }
      }));
    }

    this.setState({ selectedRowKeys });
  };

  cleanSelectedKeys = () => {
    this.onSelectChange([], []);
  };

  private initCurrent = () => {
    this.setState({
      current: 1
    })
  };

  componentDidMount() {
    this.queryData({ pageNum: 1 })
  }

  render() {

    const { data, isSelect, loading, fireRoomId } = this.props;
    const { selectedRowKeys, current } = this.state;
    const { list, total } = data;

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };

    const pagination = {
      total,
      showTotal: total => `共 ${total} 条`,
      current: this.state.current,
      pageSize: 8,
      onChange: (current) => {
        this.setState({ current }, () => this.queryData({ pageNum: current }));
      },
    };

    const ans = Array.isArray(list) ? list.map(v => ({
      ...v,
      key: `${v.id}%%${v.name}%%${v.fireRoomId}`
    })) : [];

    return (
      <>
        <Form 
          current={current} 
          initCurrent={this.initCurrent} 
          isSelect={isSelect} 
          fireRoomId={fireRoomId} 
          handleSearch={(v:string) => this.queryData({ name: v, pageNum: 1 })}
        />
        {
          isSelect && <Alert
            message={
              <>
                已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
              <a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>清空</a>
              </>
            }
            type="info"
            showIcon
            style={{ marginBottom: '10px' }}
          />
        }
        <Table
          columns={isSelect? columns : columns.slice(1)}
          pagination={pagination}
          dataSource={ans || []}
          bordered
          loading={loading}
          rowSelection={isSelect ? rowSelection : null}
        />
      </>
    )
  }
}

export default Build;

const columns = [{
  title: '所在消控室',
  dataIndex: 'fireRoomName',
}, {
  title: '建筑名称',
  dataIndex: 'name',
}, {
  title: '建筑地址',
  dataIndex: 'address',
}];